<template>
  <a-card>
    <div class="search">
      <a-form layout="horizontal">
        <div class="fold">
          <a-row>
            <a-col :md="12" :sm="24">
              <a-form-item label="操作时间" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                <a-range-picker
                    v-model="queryTime"
                    :ranges="ranges"
                    showTime
                    format="YYYY-MM-DD HH:mm:ss"
                    @change="value => pickerChange(value, 'Time')"
                    @ok="value => pickerOk(value, 'Time')"
                />
              </a-form-item>
            </a-col>
            <a-col :md="12" :sm="24">
              <span style="float: right; margin-top: 3px;">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <div>
      <s-table
          ref="table"
          size="default"
          :rowKey="(record) => record.id"
          :columns="columns"
          :data="loadData"
          :alert="options.alert"
          :rowSelection="options.rowSelection"
          bordered
          showPagination="auto"
          :pageSize="10"
          :pagination="{
            showQuickJumper: true,
            showTotal: (totalSize, range) => `共 ${totalSize} 条`
          }"
          :scroll="{x: scrollX}"
      >
      </s-table>
    </div>

  </a-card>
</template>

<script>
import {queryOpLogList} from '@/services/user'
import {ranges} from '@/utils/businessSettings'

export default {
  name: 'QueryOpLogList',
  components: {},
  data() {
    return {
      queryParam: {nameLike: ''},
      queryTime: [],
      ranges: ranges,
      columns: [
        {title: '用户', dataIndex: 'userid', width: 150},
        {title: '操作描述', dataIndex: 'descript', width: 300},
        {title: 'IP', dataIndex: 'ip', width: 200},
        {title: 'URL', dataIndex: 'uri', width: 300},
        {title: '时间', dataIndex: 'updateDate', width: 200, sorter: true}
      ],
      selectedRows: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return queryOpLogList({...parameter, ...this.queryParam}).then(res => {
          return res && res.data.data
        })
      },
      selectedRowKeys: [],
      options: {
        alert: {
          show: false,
          clear: () => {
            this.selectedRowKeys = []
          }
        },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
    }
  },
  methods: {
    resetSearchForm() {
      this.queryParam = {}
      this.queryTime = []
      this.$refs.table.refresh(true)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    pickerChange(dates, which) {
      if (dates.length === 0) {
        this.queryParam[`start${which}`] = undefined
        this.queryParam[`end${which}`] = undefined
        this.$refs.table.refresh(true)
      } else if (dates.length === 2) {
        this.pickerOk(dates, which)
      }
    },
    pickerOk(dates, which) {
      const [start, end] = dates
      this.queryParam[`start${which}`] = start.format('YYYY-MM-DD HH:mm:ss')
      this.queryParam[`end${which}`] = end.format('YYYY-MM-DD HH:mm:ss')
      this.$refs.table.refresh(true)
    }
  },
  mounted() {

  },
  created() {
  },
  computed: {
    scrollX() {
      return this.columns.reduce((prev, cur) => {
        return prev + (cur.width || 240)
      }, 0)
    }
  }
}
</script>

<style lang="less" scoped>
.search {
  margin-bottom: 4px;
}

.fold {
  width: calc(100% - 216px);
  display: inline-block
}

.ant-form-item {
  margin-bottom: 0px;
}

@media screen and (max-width: 900px) {
  .fold {
    width: 100%;
  }
}
</style>
